<template>
    <div class="">
        <el-table v-bind="$attrs"
                  v-loading="loading"
                  :data="data"
                  :max-height="tableMaxHeight"
                  style="width: 100%"
                  ref="table">
            <slot></slot>
        </el-table>
        <el-pagination v-if="total > 10"
                       class="pages"
                       background
                       layout="total, sizes, prev, pager, next, jumper"
                       :total="total"
                       :page-sizes="[10, 20, 30, 40,50]"
                       :current-page.sync="currentPage"
                       @size-change="handleSizeChange"
                       @current-change="handleCurrentChange">
        </el-pagination>
    </div>
</template>

<script>
export default {
    props: {
        init: {
            type: Number,
            default: 0
        },
        data: {
            type: Array, // 内容区的类目，用于计算
            default: () => []
        },
        loading: {
            type: Boolean,
            default: false
        },
        total: {
            type: Number,
            default: -1
        },
        defaultCurrentPage: { // 当前的页码
            type: Number,
            default: 1
        }
    },
    components: {},
    watch: {
        defaultCurrentPage(val) {
            this.currentPage = val;
        },
        init() {
            this.calcTableMaxHeight();
        }
    },
    data() {
        return {
            tableMaxHeight: 0,
            currentPage: 1 // 页码
        };
    },
    computed: {},
    mounted() {
        // this.calcTableMaxHeight();
    },
    methods: {
        calcTableMaxHeight() {
            this.$nextTick(() => {
                const wrapH = document.body.clientHeight;
                const tableTop = this.$refs.table.$el.getBoundingClientRect().top;
                const pageH = this.total > 10 ? 43 : 5;
                const maxH = wrapH - tableTop - pageH;
                this.tableMaxHeight = maxH || 400;
                console.log(this.tableMaxHeight, 'this.tableMaxHeight');
            });
        },
        handleSizeChange(val) {
            this.$emit('size-change', val);
        },
        handleCurrentChange(val) {
            this.$emit('current-change', val);
        }
    }
};
</script>

<style scoped lang="less">
.pages {
    margin-top: 12px;
}
</style>
